import 'package:flutter/material.dart';

void main() {
  // 运行APP入口方法
  // widget小组件 - 在dart里面万物皆组件
  // 1.启动入口-MaterialApp()   title:任务管理上面的标题,home展示的页面
  // 2.应用界面的脚手架-Scaffold()  appBar：应用导航  body应用内容
  runApp(
    MaterialApp(
      title: 'App任务管理上面展示的标题(浏览器的标题)',
      home: Scaffold(
        // AppBar就是导航组件
        appBar: AppBar(
          backgroundColor: Colors.blue.shade300,
          // title就是导航的标题文字，必须是Text
          title: Row(
            children: [Icon(Icons.arrow_back), Text('我的第一个flutter应用')],
          ),
        ),
        body: HomePage()
       ),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState()=>_HomePage();
}
class _HomePage extends State<StatefulWidget> {
   @override
  Widget build(BuildContext context) {
    return Column(
          children: [
            // 1.容器组件-类似DIV，独占一行
            Container(
              width: 100,
              height: 200,
              margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
              padding: EdgeInsets.all(20),
              // 如果没有边框可以直接写color,如果有边框需要在decoration里面写color,不然报错
              // color: Colors.amber,
              decoration: BoxDecoration(
                color: Colors.amber,
                border: Border.all(
                  color: Colors.green,
                  width: 10,
                  style: BorderStyle.solid,
                ),
              ),
              child: Text('我是一段文字我是一段文字我是一段文字我是一段文字'),
            ),
            // 2.文本组件
            Text(
              '我的第一个flutter应用，我的第一个flutter应用，我的第一个flutter应用，我的第一个flutter应用',
              style: TextStyle(
                color: Colors.amber,
                backgroundColor: Colors.red,
                fontSize: 20,
                fontWeight: FontWeight.bold,
                letterSpacing: 4,
              ),
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
            // 3.图片组件
            // 网络图片
            // Image.network(
            //   'https://img2.baidu.com/it/u=992900771,208737381&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=705',
            //   width: 200,
            //   // 图片填充模式
            //   // fit: BoxFit.cover,
            // ),
            // // 本地图片
            // // 点击事件的组件
            // ElevatedButton(
            //   onPressed: () {
            //     // 点击的时候触发的事件
            //   },
            //   child: Image.asset('images/a.png', width: 200),
            // ),
            // // 使用绑定手势的组件
            GestureDetector(
              child:Text('手势测试'),
              onTap: () {
                // 按压手势
                showDialog(context: context, builder: (context){
                  return AlertDialog(
                    title:Text('我是标题') ,
                    content: Text('666')
                  );
                });
              },
              onDoubleTap: () {
                // 双击手势
                showDialog(context: context, builder: (context){
                  return AlertDialog(
                    content: Text('777'),
                  );
                });
              },
              onLongPress: () {
                // 长按手势
                 showDialog(context: context, builder: (context){
                  return AlertDialog(
                    content: Text('888'),
                  );
                });
              },
            ),
            Row(
              children: [
                Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(color: Colors.red),
                ),
                // 中间自适应
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 50,
                    decoration: BoxDecoration(color: Colors.blue),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 50,
                    decoration: BoxDecoration(color: Colors.green),
                  ),
                ),
                Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(color: Colors.red),
                ),
              ],
            ),
            Stack(
              alignment: AlignmentDirectional.topEnd,
              children: [
                Container(width: 200, height: 200, color: Colors.blue),
                Container(width: 100, height: 100, color: Colors.green),
                // 参考父组件进行定位
                Positioned(
                  left: 20,
                  top: 20,
                  child: Container(
                    // margin: EdgeInsets.fromLTRB(0, 10, 10, 0),
                    width: 50,
                    height: 50,
                    color: Colors.pink,
                  ),
                ),
              ],
            ),
          ],
        );
  }
}

// 总结：
// 1.flutter的入口函数 ：runApp(Widget)
// 2.Widget是要遵循规范 MaterialApp( title, home )
// 3.home是要遵循脚手架规范 Scaffold( appBar, body )
